<template>
	<div>
		<!-- 头部 -->
		<div>
			<van-search
			  v-model="value"
			  shape="round"
			  background="#00669a"
			  placeholder="请输入搜索关键词"
			/>
		</div>
		
		<div class="message-box">
			<div class="message-item">
				<van-image
				class="touxiang"
				  round
				  src="https://img01.yzcdn.cn/vant/cat.jpeg"
				/>
				<div class="title">第一图书馆</div>
				<div class="test">同学，请问你请问你什么时候能到岗?什么时候能到岗?</div>
				<div class="time">18:00</div>
			</div>
			
			<!-- 分割线 -->
			<div class="line"></div>
			
		</div>
		
		<div class="message-box">
			<div class="message-item">
				<van-image
				class="touxiang"
				  round
				  src="https://img01.yzcdn.cn/vant/cat.jpeg"
				/>
				<div class="title">{{text}}</div>
				<div class="test">{{text}}</div>
				<div class="time">{{text}}</div>
			</div>
			
			<!-- 分割线 -->
			<div class="line"></div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Message',
		 data() {
		    return {
		      text: '后端数据'
		    };
		  }
	}
</script>

<style lang="less" scoped>
	.message-item {
		position: relative;
		.title {
			position: absolute;
			left: 80px;top: 15px;
			font-size: 20px;
		}
		.test {
			position: absolute;left: 80px;top: 50px;
			width: 200px;
			height: 30px;
			font-size: 14px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			color: #b0b0b0;
		}
		.time {
			position: absolute;
			top: 40px;
			right: 30px;
			font-size: 10px;
			color: #b0b0b0;
		}
	}
	.touxiang {
		margin-left: 10px;
		margin-top: 10px;
		width: 60px;
		height: 60px;
		background-color: pink;
		border-radius: 50%;
		text-align: center;
	}
	
	.line {
		margin-top: 10px;
		margin-left: 10%;
		width: 80%;
		border-bottom: 2px solid #f2f2f2;
	}
</style>